<template xmlns="">
  <view class="store-order-submit">
    <view class="getGoods-info">
      <view @click="changeSendType" class="row send">
        <view class="title">{{
          pubShopInfo.industry <= 100 ? "就餐方式" : "配送方式"
        }}</view>
        <view class="txt">
          <view class="" v-if="dineParams">{{ dineParams.title }}</view>
          <view
            v-if="distributionType.datas.length > 1"
            class="iconfont icon-qiehuan"
            :style="{ background: themeColor }"
          ></view>
        </view>
      </view>
      <view
        v-if="dineParams && dineParams.value === 'PUB_LOCAL'"
        class="address"
      >
        <view @click="jumpEditAddressPage()" class="row">
          <view class="title">收货信息</view>
          <view
            class="iconfont icon-bianji"
            :style="{ background: themeColor }"
          ></view>
        </view>
        <view
          v-if="userInfo"
          style="color: #131313; font-size: 29rpx; margin-top: 44rpx"
        >
          <span>{{ userInfo.userName }}</span>
          <span style="margin-left: 24rpx">{{ userInfo.phone }}</span>
        </view>
        <view v-if="userInfo" class="address-txt">
          {{
            userInfo.province +
            userInfo.city +
            userInfo.country +
            userInfo.street +
            userInfo.detail
          }}
        </view>
        <view v-else class="address-txt">请先添加收货信息</view>
      </view>
      <view v-else class="address">
        <view @click="openLocationFun()" class="row">
          <view class="title">门店位置</view>
          <view
            class="iconfont icon-dingwei2"
            :style="{ background: themeColor }"
          ></view>
        </view>
        <view class="address-txt">
          {{
            shopInfo.provinceCode +
            shopInfo.cityCode +
            shopInfo.areaCode +
            shopInfo.address
          }}
        </view>
      </view>
      <view
        v-if="
          dineParams &&
          (dineParams.value === 'PUB_LOCAL' ||
            dineParams.value === 'PUB_SELF_PICKUP')
        "
        class="row"
      >
        <view class="title">{{
          dineParams.value == "PUB_SELF_PICKUP" ? "自提时间" : "预约送达时间"
        }}</view>
        <view class="txt" @click="openSendTimePop">
          <view style="color: #c9c9c9">{{ getGoodTime.text }}</view>
          <view
            class="iconfont icon-xiangyoujiantou"
            style="color: #c0c0c0; margin-left: 12rpx"
          ></view>
        </view>
      </view>
    </view>

    <view class="card-order-list">
      <view class="li-box">
        <view class="top-info">
          <view class="lef">
            <view class="logo">
              <xh-img :src="shopInfo.logo" />
            </view>
            <view class="title">{{ shopInfo.shopName }}</view>
          </view>
          <!-- <view class="rig iconfont icon-xiangyoujiantou"></view> -->
        </view>
        <view
          v-for="(item, index) in orderInfo.order"
          :key="index"
          class="cen-info"
        >
          <view class="shop">
            <view class="img">
              <xh-img :src="item.cover" />
            </view>
          </view>

          <view class="conten">
            <view class="shopTxt">
              <view class="name">{{ item.title }}</view>
              <view v-if="item.skuInfo !== '[]'" class="spec">
                {{ JSON.parse(item.skuInfo) }}
              </view>
            </view>
            <view class="num">
              <view class="money">
                <span style="font-size: 20rpx">￥</span>
                {{ $myTool.toFixedNum(item.price / 100) }}
              </view>
              <view class="txt">x{{ item.num }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="card-amount">
      <view
        v-if="
          dineParams &&
          (dineParams.value === 'PUB_LOCAL' ||
            dineParams.value === 'PUB_PACK' ||
            dineParams.value === 'PUB_SELF_PICKUP')
        "
        class="row"
      >
        <view class="tit">{{
          dineParams.value === "PUB_LOCAL" ? "配送费" : "打包费"
        }}</view>
        <view>￥{{ dineParams.fee / 100 }}</view>
      </view>
      <view class="row" v-if="orderAmount > 0.01" @click="handleSelectCoupon">
        <view class="tit"> 优惠 </view>
        <view class="tit discount-price">
          {{
            discountList.length > 0
              ? discountInfo !== null
                ? `-￥${discountFee}`
                : "请选择"
              : "无优惠"
          }}
          <view
            class="iconfont icon-xiangyoujiantou"
            style="color: #c0c0c0; margin-left: 12rpx"
          ></view>
        </view>
      </view>
      <view class="row">
        <view class="tit">订单备注</view>
        <view class="remarks">
          <input
            style="text-align: right"
            type="text"
            placeholder="请输入备注"
            value=""
            maxlength="40"
            v-model="orderInfo.remark"
          />
        </view>
      </view>
    </view>
    <!-- 大于10km提示 -->
    <view
      v-if="
        DistanceInfo.distance >= 10000 &&
        dineParams &&
        dineParams.value === 'PUB_LOCAL'
      "
      class="tip"
    >
      <view class="bg" :style="{ background: themeColor }"></view>
      <view class="text" :style="{ color: '#fff' }">{{
        DistanceInfo.tipsContent
      }}</view>
    </view>
    <view class="btm-info">
      <view class="lef">
        <view class="txt">应付：</view>
        <view class="money">
          <span>￥</span>
          <!-- {{ ((orderInfo.amount*100) - (discountFee*100))/100 }}{{orderInfo.amount}}{{discountFee}} -->
          {{ floatSub(orderInfo.amount, discountFee) }}
        </view>
        <view class="num">共{{ orderInfo.total }}件</view>
      </view>
      <view @click="handlePay" class="rig">
        <button
          class="payBtn"
          hover-class="hoverClass"
          :style="{
            backgroundColor: themeColor,
            opacity:
              DistanceInfo.distance >= 10000 &&
              dineParams &&
              dineParams.value === 'PUB_LOCAL'
                ? '0.5'
                : '',
          }"
        >
          去支付
        </button>
      </view>
    </view>

    <send-time
      v-if="sendTimePopup"
      :show.sync="sendTimePopup"
      @popMsg="getPopMsg"
      :popMsg="getGoodTime"
      :title="sendTimeTitle"
    ></send-time>
    <dine-way-pop :visible.sync="showDine" />
  </view>
</template>

<script>
import { mapState } from "vuex";
import sendTime from "@/pages/sp-order/pages/store-order-submit/components/send-time";
import dineWayPop from "@/components/pageComponents/sp-store/dineWayPop";
import { getAddressList } from "@/service/api/sp-address";
import { getShopDetail } from "@/service/api/sp-store";
import { getDiscount } from "@/service/api/sp-coupon";
import {
  pre_order,
  get_pre_order,
  queryIntervalDistance,
  createOrder,
} from "@/service/api/sp-order/index";
import { TABLE_QUERY_KEY } from "@/pages/sp-store/const";
import { appGetStorage, appRemoveStorage } from "@/utils/storage";
// import { JSON } from '../../../../components/baseComponents/materals/business/yqd-demo';
export default {
  components: {
    sendTime,
    dineWayPop,
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
    ...mapState("sp-store/index", [
      "dineParams",
      "distributionType",
      "pubShopId",
      "pubShopInfo",
    ]),
    tableText({ tableParams }) {
      return tableParams && tableParams?.areaName && tableParams?.tableNo
        ? `${tableParams?.areaName}区${tableParams?.tableNo}桌`
        : "";
    },
  },
  watch: {
    // 监听配送方式变化
    dineParams: {
      handler(newVal) {
        console.log("watch - dineParams", newVal);
        this.queryIntervalDistanceFun();
        this.calculateFun();
      },
      deep: true,
    },
  },
  data() {
    return {
      sendTimePopup: false,
      sendTimeTitle: "",
      getGoodTime: {
        date: "",
        time: "",
        text: "请选择时间",
        stanTime: "",
      },
      showDine: false,

      // 收货信息
      userInfo: "",
      // 门店详情
      shopInfo: "",
      // 订单详情
      orderInfo: {
        order: [],
        source: "",
        storeId: "",
        remark: "",
        preNo: "",
        amount: "",
        total: "",
      },
      //距离
      DistanceInfo: "",
      orderAmount: 0,
      discountInfo: null,
      discountFee: 0,
      discountList: [],
      tableParams: {}, //桌码参数
      eventChannelOrderData: null,
    };
  },
  onShow() {
    this.addressListFun();
    uni.$on("changeDiscount", (res) => {
      console.log(res);
    });
    this.sendTimeTitle =
      this.dineParams?.value === "PUB_SELF_PICKUP"
        ? "请选择自提时间"
        : "请选择配送时间";
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("order", (res) => {
      this.eventChannelOrderData = res.data;
      this.$nextTick(() => {
        this.initFun();
      });
    });
    this.tableParams = appGetStorage(TABLE_QUERY_KEY)
      ? JSON.parse(appGetStorage(TABLE_QUERY_KEY))
      : {};
  },
  methods: {
    // 初始化
    initFun() {
      this.filterOrderFun();
      this.getShopDetailFun();
    },
    // 接收send-time
    getPopMsg(params) {
      if (!params?.time) return;
      this.sendTimePopup = false;
      this.getGoodTime.date = params.date;
      this.getGoodTime.time = params.time;
      this.getGoodTime.text = params.date
        ? `${params.date} ${params.time}`
        : "请选择时间";

      this.getGoodTime.year = params.year;
      this.getGoodTime.month = params.month;
      this.getGoodTime.day = params.day;

      this.getGoodTime.stanTime =
        params.year +
        "-" +
        params.month +
        "-" +
        params.day +
        " " +
        params.time +
        ":" +
        "00";
      console.log("getGoodTime", this.getGoodTime);
    },
    // 打开send-time
    openSendTimePop() {
      this.sendTimePopup = true;
    },
    // 导航
    openLocationFun() {
      let { latitude, longitude, shopName, address } = this.shopInfo;
      this.$myTool.lookLocation(latitude, longitude, shopName, address);
    },
    // 切换配送方式
    changeSendType() {
      if (this.distributionType.datas.length <= 1) return;
      this.showDine = true;
    },
    // 获取收货信息
    addressListFun() {
      getAddressList().then((res) => {
        if (res.length > 0) {
          this.userInfo = res[0];
          console.log("获取收货信息", this.userInfo);
          this.queryIntervalDistanceFun();
        }
      });
    },
    //获取门店详情
    getShopDetailFun() {
      getShopDetail({
        id: this.pubShopId,
      }).then((res) => {
        console.log("获取门店详情", res);
        this.shopInfo = res;
      });
    },
    //获取店铺与收货地址间的距离
    queryIntervalDistanceFun() {
      let { latitude, longitude } = this.userInfo;
      console.log("获取店铺与收货地址间的距离", this.userInfo);
      if (!latitude && !longitude) return;
      let params = {
        latitude,
        longitude,
        pubDomainShopId: this.pubShopId,
      };
      queryIntervalDistance(params).then((res) => {
        this.DistanceInfo = res;
      });
    },
    // 跳转编辑地址
    jumpEditAddressPage() {
      this.$Router.push({
        name: "myEditAddress",
        params: {
          type: this.userInfo ? "edit" : "add",
          data: this.userInfo,
        },
      });
    },
    //再来一单
    handleAgain() {
      const pages = getCurrentPages();
      if (
        pages[pages.length - 2].route == "pages/sp-store/pages/shop-index/index"
      ) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.redirectTo({
          url: `pages/sp-store/pages/shop-index/index?shopId=${this.orderDetail.pubShopId}`,
        });
      }

      // this.$Router.push({
      //   name: "shopIndex",
      //   params: {
      //     shopId: this.shopInfo.id,
      //   },
      // });
    },
    // 去支付
    handlePay() {
      let that = this;
      //超出配送范围
      if (
        that.DistanceInfo.distance >= 10000 &&
        that.dineParams?.value === "PUB_LOCAL"
      )
        return;
      //未填写收货信息
      if (!that.userInfo && that.dineParams?.value === "PUB_LOCAL") {
        uni.showToast({
          title: "请先添加收货信息",
          icon: "none",
        });
        return;
      }
      //未选择时间
      if (
        !that.getGoodTime.stanTime &&
        (that.dineParams?.value === "PUB_LOCAL" ||
          that.dineParams?.value === "PUB_SELF_PICKUP")
      ) {
        uni.showToast({
          title: "请选择时间",
          icon: "none",
        });
        return;
      }
      //已填写收货信息
      if (that.userInfo && that.dineParams?.value === "PUB_LOCAL") {
        console.log("去支付-配送");
        that.pre_orderFun();
        return;
      }
      //其他方式
      if (that.dineParams?.value !== "PUB_LOCAL") {
        console.log("去支付-其他方式");
        //是否已获取用户定位
        uni.getLocation({
          type: "wgs84",
          success: function (res) {
            console.log("获取成功");
            if (that.DistanceInfo.distance >= 3000) {
              // 门店距离用户≥3km
              uni.showModal({
                title: "提示",
                content: `当前门店离您${(
                  that.DistanceInfo.distance / 1000
                ).toFixed(2)}km，是否确认下单？`,
                cancelText: "取消",
                confirmText: "确认下单",
                showCancel: true,
                success: (res) => {
                  if (res.confirm) {
                    that.pre_orderFun();
                  } else {
                    console.log("cancel");
                  }
                },
              });
            } else {
              that.pre_orderFun();
            }
          },
          fail() {
            console.log("获取失败");
            //用户定位获取失败
            uni.showModal({
              title: "提示",
              content: "当前门店可能离您较远，是否确认下单？",
              cancelText: "取消",
              confirmText: "确认下单",
              showCancel: true,
              success: (res) => {
                if (res.confirm) {
                  that.pre_orderFun();
                } else {
                  console.log("cancel");
                }
              },
            });
          },
        });
      }
    },
    // 筛选订单
    filterOrderFun() {
      const order = this.eventChannelOrderData;
      let arr = [];
      order.items.forEach((el) => {
        // 是否有库存   55101：已下架  55102：已售罄
        if (
          el.stockNum >= el.num &&
          el.errorCode !== 55101 &&
          el.errorCode !== 55102
        ) {
          el.amount = el.num * (el.price / 100);
          el.skuInfo = JSON.parse(JSON.stringify(el.skuInfo));
          arr.push(el);
        }
      });
      this.orderInfo.order = arr;
      this.orderInfo.source = order.source;
      this.orderInfo.storeId = order.storeId;
      this.calculateFun();
    },
    // 计算总金额和数量
    calculateFun() {
      let amount = 0;
      let total = 0;
      let orderAmount = 0;
      let arr = this.orderInfo.order;
      arr.forEach((val) => {
        amount += val.amount;
        total += val.num;
        orderAmount += val.amount;
      });
      // if (
      //   this.dineParams?.value === "PUB_LOCAL" ||
      //   this.dineParams?.value === "PUB_PACK"
      // ) {
      //   amount = amount + this.dineParams?.fee / 100;
      // }
      amount = amount + this.dineParams?.fee / 100;
      this.orderAmount = orderAmount;
      this.orderInfo.amount = this.$myTool.toFixedNum(amount);
      this.orderInfo.total = total;
      if (orderAmount > 0.01) {
        this.getDiscount();
      }
      console.log(this.orderInfo);
    },
    // 预下单
    pre_orderFun() {
      let params = {
        items: [...this.orderInfo.order],
        source: this.orderInfo.source, //下单方式, 0: 购物车, 1: 立即购买
        storeId: this.orderInfo.storeId, //店铺id
        tableNo: this.tableText || "",
        type: this.dineParams?.value, //外卖配送: PUB_LOCAL 堂食: PUB_HALL_FOOD 打包: PUB_PACK 到店消费: PUB_SHOP_CONSUME 自提: PUB_SELF_PICKUP
      };
      pre_order(params).then((res) => {
        this.orderInfo.preNo = res.preNo;
        get_pre_order({
          preNo: this.orderInfo.preNo,
        }).then((res) => {
          console.log("获取预下单信息", res);
          this.createOrderFun();
        });
      });
    },
    //创建订单
    createOrderFun() {
      let { province, city, country, street, detail, phone, userName } =
        this.userInfo;
      let { latitude, longitude, storeNo } = this.shopInfo;
      if (!storeNo) {
        uni.showLoading({
          title: "获取商户信息中，请稍后重试",
          success: () => {
            let timer = setTimeout(() => {
              clearTimeout(timer);
              uni.hideLoading();
            }, 1500);
          },
        });
        return;
      }
      let { order, storeId, remark, preNo } = this.orderInfo;
      let obj = {
        deliveryInfo: {
          province,
          city,
          country,
          street,
          detail,
          latitude,
          longitude,
          phone,
          userName,
        },
        items: order,
        pubBusinessId: this.pubShopInfo.pubDomainBusinessId,
        pubShopId: this.pubShopId,
        remark,
        source: {
          preNo,
        },
        storeId,
        type: this.dineParams?.value,
        appointmentTime: this.getGoodTime.stanTime,
        otherFee: this.dineParams?.fee,
        discountInfo: {
          discountInfo: this.discountInfo,
        },
        tableNo: this.tableText || "",
      };

      createOrder(obj)
        .then((res) => {
          console.log("创建订单成功", res);
          let { orderNo } = res;
          this.$pay({
            xhOrderNo: orderNo,
            storeNo,
            fail: () => {
              this.$Router.replace({
                name: "storeOrderDetails",
                params: {
                  data: {
                    orderNo,
                  },
                },
              });
              this.$store.commit("sp-store/index/SET_DINE", "");
              this.$store.dispatch("sp-store/index/initCart");
            },
          })
            .then((res) => {
              console.log("收银台", res);
              if (res.code === 0) {
                appRemoveStorage(TABLE_QUERY_KEY);
                uni.showToast({
                  title: "支付成功",
                  icon: "none",
                });

                setTimeout(() => {
                  this.$Router.replace({
                    name: "storeOrderDetails",
                    params: {
                      data: {
                        orderNo,
                      },
                    },
                  });
                  this.$store.commit("sp-store/index/SET_DINE", "");
                  this.$store.dispatch("sp-store/index/initCart");
                }, 2000);
              }
            })
            .catch((err) => {
              this.$Router.replace({
                name: "storeOrderDetails",
                params: {
                  data: {
                    orderNo,
                  },
                },
              });
              this.$store.commit("sp-store/index/SET_DINE", "");
              this.$store.dispatch("sp-store/index/initCart");
            });
        })
        .catch((err) => {
          uni.showModal({
            title: "提示",
            content: err,
            confirmText: "我知道了",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.$myTool.jumpPage("back");
              } else {
                console.log("cancel");
              }
            },
          });
        });
    },
    // 获取最新优惠券
    getDiscount() {
      let { orderAmount: payMoney, pubShopId: pubDomainShopId } = this;
      if (payMoney === 0 || payMoney < 0) return;
      getDiscount({
        payMoney: payMoney * 100,
        pubDomainShopId,
      }).then((res) => {
        if (payMoney && res.length > 0) {
          this.discountList = res;
          this.changeDiscount(res[0]);
        }
      });
    },
    changeDiscount(discountInfo) {
      if (discountInfo != null) {
        this.discountInfo = discountInfo;
        this.discountFee = discountInfo.discountFee / 100;
      } else {
        this.discountInfo = null;
        this.discountFee = 0;
      }
      console.log(this.discountFee);
    },
    handleSelectCoupon() {
      let {
        shopInfo: { id: shopId },
        orderAmount: totalFee,
        discountInfo: selectItem,
      } = this;
      let params = {
        shopId,
        totalFee,
        orderType: 6,
        selectItem,
      };
      uni.navigateTo({
        url: `pages/sp-coupon/pages/select-discount/index?par=${encodeURIComponent(
          JSON.stringify(params)
        )}`,
        events: {
          acceptDataFromOpenedPage: (res) => {
            res.discountInfo = JSON.parse(res.discountInfo);
            this.changeDiscount(res.discountInfo);
          },
        },
      });
    },
    floatSub(arg1, arg2) {
      console.log("计算", arg1, arg2);
      let r1, r2, m, n;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      //动态控制精度长度
      n = r1 >= r2 ? r1 : r2;
      console.log("计算后", ((arg1 * m - arg2 * m) / m).toFixed(n));
      return ((arg1 * m - arg2 * m) / m).toFixed(n);
    },
  },
};
</script>

<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.store-order-submit {
  padding: 20rpx;
  box-sizing: border-box;

  .getGoods-info {
    background-color: white;
    border-radius: 8rpx;
    padding: 36rpx 23rpx;
    box-sizing: border-box;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30rpx;

      .title {
        font-size: 29rpx;
        font-weight: bold;
        color: #131313;
      }

      .txt {
        font-size: 29rpx;
        font-weight: 500;
        color: #181818;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .iconfont {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          text-align: center;
          line-height: 48rpx;
          font-size: 24rpx;
          color: white;
          margin-left: 32rpx;
        }
      }
    }

    .send {
      border-bottom: 1rpx solid #ececec;
      padding-bottom: 36rpx;
      margin-top: 0;
    }

    .address {
      .iconfont {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: white;
        margin-left: 32rpx;
      }

      .address-txt {
        font-size: 27rpx;
        font-weight: 500;
        color: #888888;
        margin-top: 26rpx;

        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
    }
  }

  .card-order-list {
    margin-top: 20rpx;

    .li-box {
      background-color: white;
      border-radius: 10rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;

      .top-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #ececec;
        padding-bottom: 26rpx;

        .lef {
          display: flex;
          align-items: center;

          .logo {
            width: 67rpx;
            height: 67rpx;
            border-radius: 50%;
            overflow: hidden;
            float: left;
          }

          .title {
            float: left;
            font-size: 32rpx;
            font-weight: bold;
            color: #181818;
            margin-left: 16rpx;
          }
        }

        .rig {
          font-size: 27rpx;
          font-weight: 500;
        }
      }

      .cen-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shop {
          display: flex;
          align-items: center;

          .img {
            width: 150rpx;
            height: 150rpx;
            overflow: hidden;
            float: left;
          }
        }

        .conten {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #ececec;
          padding: 58rpx 0;
          margin-left: 16rpx;

          .shopTxt {
            .name {
              font-size: 29rpx;
              font-weight: bold;
              color: #181818;
            }

            .spec {
              margin-top: 21rpx;
              padding: 5rpx 14rpx;
              color: #888888;
              opacity: 0.8;
              font-size: 27rpx;
              border: 1px solid #b4b4b4;
              opacity: 0.8;
              border-radius: 8rpx;
              width: fit-content;
            }
          }

          .num {
            font-size: 29rpx;
            font-weight: 500;

            .money {
              color: #f05357;
              font-weight: bold;
            }

            .txt {
              color: #888888;
              text-align: right;
            }
          }
        }
      }
    }
  }

  .card-amount {
    background-color: white;
    border-radius: 8rpx;
    padding: 24rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    margin-bottom: 200rpx;

    .row {
      display: flex;
      justify-content: space-between;
      margin-top: 45rpx;
      font-size: 29rpx;
      font-weight: 500;
      color: #131313;
      align-items: center;

      .tit {
        opacity: 0.7;
      }
      .remarks {
        width: 50%;
      }
    }

    .row:nth-of-type(1) {
      margin-top: 0;
    }

    .results {
      display: flex;
      justify-content: flex-end;
      border-top: 1rpx solid #ececec;
      padding-top: 29rpx;

      .preferential {
        color: #888888;
        margin-right: 25rpx;
      }

      .total {
        font-weight: bold;

        span {
          color: #f05357;
        }
      }
    }

    .input {
      float: right;
    }

    .iconfont {
      float: right;
      font-size: 24rpx;
    }
  }

  .tip {
    width: 100%;
    height: 64rpx;
    font-size: 27rpx;
    background-color: white;
    position: fixed;
    left: 0;
    bottom: 120rpx;
    z-index: 10;

    .bg {
      opacity: 0.5;
      width: 100%;
      height: 100%;
      position: relative;
    }

    .text {
      width: 100%;
      height: 100%;
      font-size: 27rpx;
      text-align: center;
      line-height: 64rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .btm-info {
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 20rpx;
    box-sizing: border-box;

    .lef {
      font-size: 29rpx;
      display: flex;
      align-items: center;

      .txt {
        float: left;
        color: #181818;
        font-weight: bold;
      }

      .money {
        float: left;
        color: #f05357;
        font-weight: bold;
        span {
          font-size: 24rpx;
        }
      }

      .num {
        float: left;
        margin-left: 20rpx;
        color: #888888;
        font-size: 27rpx;
        font-weight: bold;
      }
    }

    .rig {
      display: flex;
      align-items: center;

      .payBtn,
      .againBtn {
        width: 180rpx;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 80rpx;
        float: right;
        padding: 0;
        border: 1px solid #ffffff;
        margin-left: 30rpx;
      }

      button::after {
        border: none;
      }

      .hoverClass {
        opacity: 0.5;
      }
    }
  }
}

.discount-price {
  display: flex;
  align-items: center;
}
</style>
